<template>
    <div class="preview">
        <!-- 基本信息 -->
        <div>
            <el-row :gutter="10">
                <el-col :span="6">
                    <span>【题型】:</span>
                    <span v-if="curExamInfo.questionType ===1">单选</span>
                    <span v-else-if="curExamInfo.questionType ===2">多选</span>
                    <span v-else>简答</span>
                </el-col>
                <el-col :span="6">
                    <span>【编号】:</span>
                    <span>{{curExamInfo.id}}</span>
                </el-col>
                <el-col :span="6">
                    <span>【难度】:</span>
                    <span v-if="curExamInfo.difficulty===1">简单</span>
                    <span v-else-if="curExamInfo.difficulty===2">一般</span>
                    <span v-else>困难</span>
                </el-col>
                <el-col :span="6">
                    <span>【标签】:</span>
                    <span>{{curExamInfo.tags}}</span>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="twoRow">
                <el-col :span="6"><span>【学科】:</span><span>{{curExamInfo.subject}}</span></el-col>
                <el-col :span="6"><span>【目录】:</span><span>{{curExamInfo.catalog}}</span></el-col>
                <el-col :span="6"><span>【方向】:</span><span>{{curExamInfo.direction}}</span></el-col>
                <el-col :span="6"><span></span><span></span></el-col>
            </el-row>
        </div>
        <el-divider></el-divider>
        <!-- 题干部分 -->
        <div class="title">
            <span>【题干】:</span>
            <div class="content" v-html="curExamInfo.question"></div>
            <!-- 题型 -->
            <!-- 单选题 -->
            <div v-if="curExamInfo.questionType ===1">
                <p>单选题 选项：（以下选中的选项为正确答案）</p>
                <el-radio v-model="radio" label="1">1</el-radio><br>
                <el-radio v-model="radio" label="2">2</el-radio><br>
                <el-radio v-model="radio" label="3">3</el-radio><br>
                <el-radio v-model="radio" label="4">4</el-radio>
            </div>
            <!-- 多选题 -->
            <div v-if="curExamInfo.questionType ===2">
                <p>多选题 选项：（以下选中的选项为正确答案）</p>
                <el-checkbox label="河北"></el-checkbox><br>
                <el-checkbox label="天津"></el-checkbox><br>
                <el-checkbox label="内蒙"></el-checkbox><br>
                <el-checkbox label="辽宁"></el-checkbox>
            </div>
        </div>
        <el-divider></el-divider>
        <!-- 参考答案 -->
        <span>【参考答案】：</span>
        <el-button type="danger" size="mini" @click="videoAnswer">视频答案预览</el-button>
        <div class="video" v-if="isShowVideo">
            <video :src="curExamInfo.videoURL" autoplay controls width="350" height="200"></video>
        </div>
        <el-divider></el-divider>
        <!-- 答案解析 -->
        <div>
            <span>【答案解析】:</span>
            <!-- <span>{{curExamInfo.answer}}</span> -->
            <div class="answer" v-html="curExamInfo.answer?curExamInfo.answer:'无'"></div>
        </div>
        <el-divider></el-divider>
        <!-- 题目备注 -->
        <div>
            <span>【题目备注】:</span>
            <span>{{curExamInfo.remarks?curExamInfo.remarks:"无"}}</span>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        curExamInfo:{ //父组件穿过来的当前试题的详细信息
            type:Object,
        }
    },
    data() {
        return {
            radio:"1", //单选答案
            isShowVideo:false, //视频答案
        }
    },
    methods:{
        //视频答案
        videoAnswer(){
            // 判断视频链接是否存在，不存在不展示视频
            let videoSrc = this.curExamInfo.videoURL;
            console.log(videoSrc,"视频链接");
            if(!videoSrc){
                return;
            }
            // 显示视频
            this.isShowVideo =!this.isShowVideo;
        }
    },
    mounted() {
        console.log(this.curExamInfo,"子组件");
    }
}
</script>

<style scoped lang="less">
.twoRow {
    margin-top: 20px;
}
.el-divider--horizontal {
    margin: 10px 0;
}
.content {
    color: #1818ff;
}
.content,
.video {
    margin: 15px 0;
}
.answer {
    display: inline-block;
}
</style>